//vue组件,    名称必须小写  template内部元素必须是单根节点
Vue.component("myheader",{
    template:`
 <div>  
    <el-header class="title">  
      <div class="c900 flex">  
        <el-link :underline="false" href="index.html">  
          <h1>在线考试</h1>  
        </el-link>  
        <el-input style="width: auto" placeholder="请输入搜索关键字">  
          <el-button slot="append" icon="el-icon-search"></el-button>  
        </el-input>  
        <div class="flex" v-if="user">  
          <el-avatar :src="user.head"></el-avatar>  
          <div>  
            <el-link href="paper.html">添加考卷</el-link>  
            <el-link @click="dialogFormVisible = true">修改密码</el-link>  
            <el-link href="signOut">退出</el-link>  
          </div>  
        </div>  
        <div class="flex" v-else>  
          <div>  
            <el-link href="register.html">注册</el-link>  
            <el-link href="login.html">登录</el-link>  
          </div>  
        </div>  
      </div>  
    </el-header>  
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible">  
      <el-form>  
        <el-form-item label="用户名" label-width="200px">  
          <el-input v-model="dbuser.name" autocomplete="off" disabled></el-input>
          <p class="err" style="color: red" v-html="msgs.name"></p>  
        </el-form-item>  
        <el-form-item label="新密码" label-width="200px">  
          <el-input v-model="dbuser.pwd" autocomplete="off" type="password"></el-input> 
          <p class="err" style="color: red" v-html="msgs.pwd"></p> 
        </el-form-item>  
        <el-form-item label="确认密码" label-width="200px">  
          <el-input v-model="dbuser.repwd" autocomplete="off" type="password"></el-input>
          <p class="err" style="color: red" v-html="msgs.repwd"></p> 
        </el-form-item>  
      </el-form>  
      <span slot="footer" class="dialog-footer">  
        <el-button @click="dialogFormVisible = false">取 消</el-button>  
        <el-button type="primary" @click="updatePwd">确 定</el-button>  
      </span>  
    </el-dialog>  
  </div>
    `,
    // 组件当中定义需要用函数形式
    data(){
        return{
            dbuser:{name:'',pwd:'',repwd:''},
            user:null,
            dialogFormVisible:false,
            msgs:{name:"",pwd:"",repwd:""}
        }
    },
    methods : {
        updatePwd(){
            axios.post("updatePwd",this.dbuser).then(resp=>{
                this.msgs={name:"",pwd:"",repwd:""};
                if(resp.data.code == 1){
                    this.$message(resp.data.msg);
                    this.dbuser={name:'',pwd:'',repwd:''};
                    this.dbuser.name = this.user.name;
                    this.dbuser.id = this.user.id;
                    this.dialogFormVisible=false;
                }else{
                    this.$alert(resp.data.msg);
                    console.log(resp.data.data);
                }
                // 只有在有错误时才遍历错误列表
                if (resp.data.data && Array.isArray(resp.data.data)) {
                    resp.data.data.forEach(err=>{
                        if(this.msgs[ err.field ]){
                            this.msgs[ err.field ] += "<br>"
                        }
                        this.msgs[ err.field ] += err.defaultMessage;
                    });
                }
            });
        }
    },
    created(){
        axios.post("myinfo").then(res=>{
            this.user = res.data.data;
            if(this.user != null){
                this.dbuser = this.user;
            }
        });
    }
});